<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="18"><span style="font-weight: blod"></span>材料</el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          :disabled="multipleSet"
          @click="handleDeleteSelect"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <el-table
    :cell-style="{ padding: this.tablePadding }"
      :data="setSelectItems"
      @selection-change="handleSelectionChangeSet"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="材料名称" align="center" prop="materialName">
      </el-table-column>
      <el-table-column label="单位" align="center" prop="unitName">
      </el-table-column>
      <el-table-column label="单价" align="center" prop="materialPrice">
      </el-table-column>
      <!-- <el-table-column
        label="供应方式"
        align="center"
        prop="supplyMethod"
        :formatter="methodFormat"
      >
      </el-table-column> -->
      <el-table-column label="备注" align="center" prop="remark">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.materialId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="830px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="5">
          <left-tree
            :isShowBtn="false"
            @getParentId="getParentIdFunc"
            @cateChange="cateChange"
          />
        </el-col>
        <el-col :span="19">
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="材料名称" prop="materialName">
              <el-input
                v-model="queryParams.materialName"
                placeholder="请输入名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
          :cell-style="{ padding: this.tablePadding }"
            v-loading="loading"
            :data="paramList"
            highlight-current-row
            height="300"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="材料ID" align="center" prop="materialId" />
            <el-table-column
              label="材料名称"
              align="center"
              prop="materialName"
            />
            <el-table-column
              label="材料类型"
              align="center"
              prop="materialCategoryName"
            />
            <el-table-column
              label="供应商"
              align="center"
              prop="supplierName"
            />
            <!-- <el-table-column label="供应方式" align="center" prop="valueNumber" width="120px">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.supplyMethod"
                  placeholder="请选择"
                  clearable
                  size="small"
                >
                  <el-option
                    v-for="dict in supplyMethodOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column> -->
            <el-table-column label="计量单位" align="center" prop="unitName" />
            <el-table-column label="单价" align="center" prop="materialPrice" />
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMaterial, listCategory } from "@/api/base/material";
import { removeByValue } from "@/utils/index";
import LeftTree from "../../../base/materialInformation/components/Left.vue";
export default {
  components: { LeftTree },
  props: ["setSelectItem"],
  data() {
    return {
      loading: true,
      paramList: [],
      multiple: true,
      total: 0,
      multipleSet: true,
      open: false,
      ids: [],
      initId: 100000,
      title: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialName: null,
        materialCategoryId: null,
      },
      selectItems: [],
      setSelectItems:[]
    };
  },
  watch: {
    setSelectItem: {
      handler(val) {
       this.setSelectItems=JSON.parse(JSON.stringify(val))
      },
      deep: true,
    },
  },
  methods: {
   
    submitForm() {
      if (this.setSelectItems.length == 0) {
        this.setSelectItems = JSON.parse(JSON.stringify(this.selectItems));
        this.cancel();
        return;
      }
      let arr = this.selectItems.filter(
        (item) =>
          !this.setSelectItems.some((ele) => ele.materialId === item.materialId)
      );
      arr.forEach((item) => {
        this.setSelectItems.push(item);
      });
      this.cancel();
    },
    handleAdd() {
      this.open = true;
     this.$nextTick(()=>{
        this.$refs.multipleTable.clearSelection();
     })
      // this.setSelectItems = [];
    },
    handleDelete(id) {
      removeByValue(this.setSelectItems, "materialId", id);
    },
    handleDeleteSelect() {
      this.ids.forEach((item) => {
        removeByValue(this.setSelectItems, "materialId", item);
      });
    },
    cancel() {
      this.open = false;
      this.selectItems = [];
    },
    handleSelectionChangeSet(selection) {
      this.ids = selection.map((item) => item.materialId);

      this.multipleSet = !selection.length;
    },
    cateChange() {
      this.getCategoryList();
    },
    getCategoryList() {
      listCategory().then((response) => {
        this.categoryList = response.data;
      });
    },
    getParentIdFunc(len, id) {
      if (len > 0) {
        this.queryParams.materialCategoryId = id;
        this.getList();
      } else {
        this.loading = false;
      }
    },
    /** 查询参数定义列表 */
    getList() {
      this.loading = true;
      listMaterial(this.queryParams).then((response) => {
        let arr = response.rows;
        this.paramList = arr.map((item) => {
          return { ...item, supplyMethod: "" };
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectItems = selection;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style>
</style>